<template>
  <header class="header">
    <h1>todos</h1>
    <input v-model="isAll" id="toggle-all" class="toggle-all" type="checkbox" >
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model="taskName"
      @keydown.enter="addTask"
    />
  </header>
</template>

<script>
export default {
  props: [ "arr" ],
  data(){
    return {
      taskName: ""
    }
  },
 methods:{
   addTask(){
    //  子传父
    if(!this.taskName){
      alert("任务名不能为空！")
      return
    }
    this.$emit("sendData",this.taskName)
   }
 },
 computed:{
       // 全选功能
    isAll:{
      set(bool){
        // 同步全选框状态给小选框
        this.arr.forEach(item=>{
          item.isDone = bool
        })
      },
      get(){
        // 统计小选框状态返回给isAll
        return this.arr.every(item=>item.isDone)
      }
    },
 }
}
</script>